<template>
  <el-container class="home-container">
    <el-main class="home-content" :key="gridListState">
      <el-tabs
        v-model="currentLayoutIndex"
        v-if="layoutList && layoutList.length > 0"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="(item, index) in layoutList"
          :key="index"
          :label="item.name"
          :style="{height: item.type == 'datav' ? '100%' : 'auto'}"
        >
          <div v-if="item.dataType == 'datav'" class="fullheight">
            <DatavDesignPreview
              v-if="currentLayoutIndex == index"
              ref="datavDesign"
              :lessWidth="5"
              :lessHeight="45"
              :layout="item.layout"
            />
          </div>
          <div v-if="item.dataType == 'column'&& !isNewlayout&&!layout.config" class="fullheight">
            <template v-if="currentLayoutIndex == index">
              <el-row
                v-for="(grid, i) in item.layout.list"
                :key="i"
                :gutter="grid.options.gutter"
              >
                <div v-if="grid.type == 'grid'">
                  <el-col
                    v-for="(columns, j) in grid.columns"
                    :Key="j"
                    :span="columns.span"
                  >
                    <ht-column
                      v-for="(cl, k) in columns.list"
                      :key="k"
                      :column-alias="cl.alias"
                    />
                  </el-col>
                </div>
                <div v-if="grid.type == 'tab'">
                  <el-col :span="24">
                    <ht-tabs-column :grid="grid"></ht-tabs-column>
                  </el-col>
                </div>
                <div v-if="!grid.type">
                  <el-col :span="24">
                    <ht-column :column-alias="grid.alias" />
                  </el-col>
                </div>
              </el-row>
            </template>
          </div>
          <div class="new-layout__content" v-else-if="currentLayoutIndex == index">
            <ht-portal
              ref="htPortal"
              @click-process="handleClickProcess"
              :isShowDelete="false"
              :isDrag="false"
              :column-layout-alias="item.alias"
            >
            <template #empty>
              <el-empty
                :image="noDataImg"
                :image-size="380"
                description="暂无栏目"
              ></el-empty>
            </template>
            </ht-portal>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>
<script>
let Base64 = require('js-base64').Base64
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    return {
      layout: {},
      dataType: 'column',
      gridList: [],
      gridListState: 'init',
      layoutList: [],
      currentLayoutIndex: 0,
      newLayout: {
        header: [],
        main: {
          left: [],
          center: [],
          right: []
        },
        bottom: []
      },
      mainLayout: {
        left: [],
        center: [],
        right: []
      },
      spanMap: {
        two: {
          left: 16,
          right: 8
        },
        three: {
          left: 8,
          center: 8,
          right: 8
        },
        'equal-two': {
          left: 12,
          right: 12
        }
      },
      isNewlayout: false,
      noDataImg: require('@/assets/nodata_images/no-data.png'),
    }
  },
  computed: {
    ...mapState('login',['currentUser']),
    colSpan() {
      const layoutCol = this.newLayout.main.layoutCol || 'two'
      return key => {
        return this.spanMap[layoutCol][key]
      }
    },
    token(){
        return this.currentUser&&this.currentUser.token
      }
  },
  created() {
  },
  methods: {
    cacheUserLayout(type, layoutId) {

    },
    initLayoutList() {

    },
    handleClick() {

    },
    setNewLayoutConfig() {

    },
     handleClickProcess(row, type, tableData) {

      },
      getCurrentQuery(row, type) {

      },
      handleRequestJump(row) {

      },
  }
}
</script>
<style lang="scss" scoped>
.home-container {
  height: 100%;
  width: 100%;
  background: #f5f5f5;
}
.home-content {
  padding: 5px;
  // height: auto;
  /deep/ .el-card {
    margin-bottom: 5px;
  }
  /deep/ .el-tabs {
    height: 100%;
  }
  /deep/ .el-tabs__content,
  .el-tabs__content {
    height: auto;
    width: 100%;
    padding-top: 24px;
  }
  /deep/ .el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }
  /deep/ .el-main {
    padding: 0px;
  }
  /deep/ .el-tabs__header {
    margin: 0 0 5px;
  }
}
/deep/.el-main,
/deep/.column-body {
  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0;
    background-color: transparent;
  }
}
@media (max-width: 1152px) {
  /deep/.flow_item {
    padding: 0 10px !important;
    .flow_item__bg {
      width: 32px !important;
      height: 32px !important;
      margin-top: 4px;
      span {
        font-size: 22px !important;
        padding: 6px !important;
      }
    }
    .flow_item__count {
      font-size: 14px !important;
      line-height: 26px !important;
    }
    .flow_item__text {
      zoom: 0.9;
      line-height: 26px !important;
    }
  }
}
</style>
